<template>
  <div class="page-container">
    <el-form label-position="top" class="custom-form">
      <el-form-item label="视频文件" class="form-item-group">
        <el-input
          v-model="videoPath"
          placeholder="选择视频文件"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              @click="selectVideoFileFn"
              class="browse-btn"
              >浏览</el-button
            >
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="输出目录" class="form-item-group">
        <el-input
          v-model="outputDir"
          placeholder="选择输出目录"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              @click="selectOutputDirFn"
              class="browse-btn"
              >浏览</el-button
            >
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="输出格式" class="form-item-group">
        <el-select
          v-model="frameFormat"
          style="width: 100%"
          class="form-select"
        >
          <el-option
            v-for="format in formatAry"
            :key="format.value"
            :label="format.label"
            :value="format.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="输出名称前缀" class="form-item-group">
        <el-input
          v-model="outputNamePrefix"
          placeholder="输出帧图片的名称前缀"
          class="form-input"
        />
        <div class="form-help">留空则使用视频文件名作为前缀</div>
      </el-form-item>

      <!-- <el-form-item label="FFmpeg路径" class="form-item-group">
        <el-input
          v-model="ffmpegPath"
          placeholder="选择ffmpeg.exe"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              @click="selectFfmpegPathFn"
              class="browse-btn"
              >浏览</el-button
            >
          </template>
        </el-input>
        <div class="form-help">如果ffmpeg.exe在当前目录，可以留空</div>
      </el-form-item> -->

      <el-form-item class="progress-section">
        <div class="progress-label">处理进度</div>
        <el-progress
          :percentage="progress"
          :status="progressStatus"
          :text-inside="true"
          :stroke-width="18"
          class="custom-progress"
        />
      </el-form-item>

      <el-form-item v-if="statusVisible" class="status-section">
        <el-alert
          :title="statusMessage"
          :type="statusType"
          show-icon
          class="status-alert"
        />
      </el-form-item>

      <el-form-item class="button-section">
        <el-button
          type="success"
          @click="extractFramesFn"
          :disabled="isProcessing"
          class="primary-btn"
          >开始提取</el-button
        >
        <el-button type="default" @click="clearFormFn" class="secondary-btn"
          >清空</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';

// 响应式数据
const videoPath = ref('');
const outputDir = ref('');
const frameFormat = ref('png');
const outputNamePrefix = ref('');
const ffmpegPath = ref('');
const progress = ref(0);
const progressStatus = ref('');
const statusMessage = ref('');
const statusType = ref('info');
const statusVisible = ref(false);
const isProcessing = ref(false);

// 输出格式选项
const formatAry = reactive([
  { label: 'PNG', value: 'png' },
  { label: 'JPG', value: 'jpg' },
  { label: 'BMP', value: 'bmp' },
]);

// 选择视频文件
const selectVideoFileFn = async () => {
  const paths = await window.electronAPI.openFileDialog({
    filters: [{ name: '视频文件', extensions: ['mp4', 'avi', 'mov', 'mkv', 'wmv'] }],
  });
  if (paths.length > 0) {
    videoPath.value = paths[0];
  }
};

// 选择输出目录
const selectOutputDirFn = async () => {
  const paths = await window.electronAPI.openDirectoryDialog();
  if (paths.length > 0) {
    outputDir.value = paths[0];
  }
};

// 选择FFmpeg路径
const selectFfmpegPathFn = async () => {
  const paths = await window.electronAPI.openFileDialog({
    filters: [{ name: '可执行文件', extensions: ['exe'] }],
  });
  if (paths.length > 0) {
    ffmpegPath.value = paths[0];
  }
};

// 显示状态信息
const showStatusFn = (message, type) => {
  statusMessage.value = message;
  statusType.value = type;
  statusVisible.value = true;
};

// 更新进度值
const progressValueUpdateFn = value => {
  progress.value = value;
  if (value === 100) {
    progressStatus.value = 'success';
  } else {
    progressStatus.value = '';
  }
};

// 开始提取视频帧
const extractFramesFn = async () => {
  if (!videoPath.value) {
    showStatusFn('请选择视频文件', 'error');
    return;
  }

  if (!outputDir.value) {
    showStatusFn('请选择输出目录', 'error');
    return;
  }

  // 重置进度状态
  isProcessing.value = true;
  progress.value = 0;
  progressStatus.value = '';
  statusVisible.value = false;
  showStatusFn('开始提取视频帧...', 'info');

  try {
    const result = await window.electronAPI.extractFrames({
      videoPath: videoPath.value,
      outputDir: outputDir.value,
      frameFormat: frameFormat.value,
      ffmpegExecPath: ffmpegPath.value,
      frameNamePrefix: outputNamePrefix.value,
    });
    showStatusFn(result.message, 'success');
    progressValueUpdateFn(100);
  } catch (error) {
    showStatusFn('提取失败: ' + error.message, 'error');
  } finally {
    isProcessing.value = false;
  }
};

// 清空表单
const clearFormFn = () => {
  videoPath.value = '';
  outputDir.value = '';
  ffmpegPath.value = '';
  frameFormat.value = 'png';
  outputNamePrefix.value = '';
  progress.value = 0;
  progressStatus.value = '';
  statusVisible.value = false;
};

// 监听进度更新
const progressUpdateFn = progress => {
  if (progress.type === 'extract-frames') {
    if (progress.error) {
      showStatusFn('提取失败: ' + progress.error, 'error');
      isProcessing.value = false;
      return;
    }
    progressValueUpdateFn(progress.progress);
  }
};

// 生命周期钩子
onMounted(() => {
  window.electronAPI.onProgressUpdate(progressUpdateFn);
});

onUnmounted(() => {
  window.electronAPI.removeProgressListener();
});
</script>

<style scoped>
</style>
